<template>
  <div class="thesis-info-container">
    <div class="page-header">
      <h1>毕业论文管理系统 - 论文首页 ({{ selectedStudent.name }})</h1>
      <p>个人信息与论文成果展示</p>
      <div class="header-actions">
        <el-select v-model="selectedStudent" placeholder="请显示学生姓名" @change="handleStudentChange" style="width: 150px; margin-right: 10px;">
          <el-option
            v-for="student in students"
            :key="student.id"
            :label="student.name"
            :value="student"
          ></el-option>
        </el-select>
        <el-button type="primary" size="medium" @click="refreshData" :loading="loading">
          <i class="el-icon-refresh"></i> 刷新数据
        </el-button>
        <el-button type="success" size="medium" @click="exportReport" :disabled="!canExport">
          <i class="el-icon-download"></i> 导出报告
        </el-button>
      </div>
    </div>

    <!-- 用户个人信息模块 -->
    <el-card class="module-card">
      <div slot="header" class="card-header">
        <span><i class="el-icon-user"></i> 用户个人信息</span>
        <el-button type="text" size="small" @click="editUserInfo">
          <i class="el-icon-edit"></i> 编辑
        </el-button>
      </div>
      <div class="user-info-content">
        <div class="avatar-section">
          <el-popover placement="top" title="更换头像" trigger="click">
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :auto-upload="false"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <div slot="reference">
              <el-avatar :size="100" :src="userInfo.avatar" icon="el-icon-user-solid"></el-avatar>
            </div>
          </el-popover>
        </div>
        <div class="info-section">
          <el-row>
            <el-col :span="8"><strong>姓名：</strong> {{ userInfo.name }}</el-col>
            <el-col :span="8"><strong>学号：</strong> {{ userInfo.studentId }}</el-col>
            <el-col :span="8"><strong>班级：</strong> {{ userInfo.className }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="8"><strong>专业：</strong> {{ userInfo.major }}</el-col>
            <el-col :span="8"><strong>联系方式：</strong> {{ userInfo.contact }}</el-col>
            <el-col :span="8"><strong>邮箱：</strong> {{ userInfo.email }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="12"><strong>指导老师：</strong> {{ userInfo.advisor }}</el-col>
            <el-col :span="12"><strong>入学年份：</strong> {{ userInfo.enrollmentYear }}</el-col>
          </el-row>
        </div>
      </div>
    </el-card>

    <!-- 毕业论文基本信息展示区 -->
    <el-card class="module-card">
      <div slot="header" class="card-header">
        <span><i class="el-icon-document"></i> 毕业论文基本信息</span>
        <el-tag :type="thesisStatus.type" class="status-tag">{{ thesisStatus.text }}</el-tag>
      </div>
      <div class="thesis-basic-info">
        <el-row>
          <el-col :span="24" class="title-row">
            <strong>论文题目：</strong>
            <span class="thesis-title">{{ thesisBasicInfo.title }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><strong>论文类型：</strong> {{ thesisBasicInfo.type }}</el-col>
          <el-col :span="8"><strong>提交日期：</strong> {{ thesisBasicInfo.submitDate }}</el-col>
          <el-col :span="8"><strong>答辩日期：</strong> {{ thesisBasicInfo.defenseDate }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <strong>论文成绩：</strong>
            <el-rate v-model="scoreValue" disabled show-score :max="100"></el-rate>
          </el-col>
          <el-col :span="8"><strong>是否通过：</strong>
            <el-switch v-model="thesisBasicInfo.pass" disabled active-text="是" inactive-text="否"></el-switch>
          </el-col>
          <el-col :span="8"><strong>归档状态：</strong>
            <el-switch v-model="thesisBasicInfo.archived" disabled active-text="已归档" inactive-text="未归档"></el-switch>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><strong>关键词：</strong>
            <el-tag v-for="tag in thesisBasicInfo.keywords" :key="tag" size="small" effect="plain">{{ tag }}</el-tag>
          </el-col>
          <el-col :span="12"><strong>研究方向：</strong> {{ thesisBasicInfo.researchDirection }}</el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 毕业论文成果详细介绍模块 -->
    <el-card class="module-card">
      <div slot="header" class="card-header">
        <span><i class="el-icon-s-data"></i> 毕业论文成果详细介绍</span>
      </div>
      <div class="thesis-detail-info">
        <el-tabs v-model="activeTab" type="card">
          <el-tab-pane label="研究内容" name="content">
            <div class="tab-content">
              <h4>研究背景</h4>
              <p>{{ thesisDetailInfo.background }}</p>
              <h4>研究内容</h4>
              <p>{{ thesisDetailInfo.researchContent }}</p>
            </div>
          </el-tab-pane>
          <el-tab-pane label="研究方法" name="method">
            <div class="tab-content">
              <ul class="method-list">
                <li v-for="(method, index) in thesisDetailInfo.methods" :key="index">
                  <div class="method-item">
                    <span class="method-number">{{ index + 1 }}</span>
                    <div class="method-content">
                      <h5>{{ method.title }}</h5>
                      <p>{{ method.description }}</p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </el-tab-pane>
          <el-tab-pane label="创新点" name="innovation">
            <div class="tab-content">
              <div class="innovation-list">
                <div v-for="(item, index) in thesisDetailInfo.innovations" :key="index" class="innovation-item">
                  <div class="innovation-icon">{{ index + 1 }}</div>
                  <div class="innovation-content">
                    <h5>创新点 {{ index + 1 }}</h5>
                    <p>{{ item }}</p>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="成果展示" name="achievements">
            <div class="tab-content">
              <el-timeline>
                <el-timeline-item
                  v-for="(item, index) in thesisDetailInfo.achievements"
                  :key="index"
                  :timestamp="item.date"
                  :type="getAchievementType(index)"
                  :icon="getAchievementIcon(index)"
                >
                  <h4>{{ item.title }}</h4>
                  <p>{{ item.description }}</p>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-tab-pane>
          <el-tab-pane label="导师评价" name="evaluation">
            <div class="tab-content">
              <div class="evaluation-section">
                <div class="evaluator-info">
                  <el-avatar :size="60" :src="advisorInfo.avatar" icon="el-icon-user"></el-avatar>
                  <div class="evaluator-details">
                    <strong>{{ advisorInfo.name }}</strong>
                    <p>{{ advisorInfo.title }} | {{ advisorInfo.department }}</p>
                  </div>
                </div>
                <div class="evaluation-content">
                  <p>{{ thesisDetailInfo.evaluation.content }}</p>
                  <div class="evaluation-score">
                    <strong>综合评分：</strong>
                    <el-rate v-model="evaluationScore" disabled show-score :max="100"></el-rate>
                  </div>
                  <div class="evaluation-date">评价日期：{{ thesisDetailInfo.evaluation.date }}</div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>

        <div class="file-section">
          <h3>相关文件</h3>
          <el-upload
            class="upload-demo"
            drag
            action="#"
            :auto-upload="false"
            :on-change="handleFileChange"
            :file-list="fileList"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">拖拽文件到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传 PDF/DOC/DOCX 文件，单个文件不超过10MB</div>
          </el-upload>

          <div v-if="fileList.length > 0" class="file-list-section">
            <h4>已上传文件</h4>
            <el-table :data="fileList" style="width: 100%">
              <el-table-column prop="name" label="文件名" width="300"></el-table-column>
              <el-table-column prop="size" label="大小" width="100">
                <template slot-scope="scope">{{ formatFileSize(scope.row.size) }}</template>
              </el-table-column>
              <el-table-column prop="type" label="类型" width="100"></el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" @click="downloadFile(scope.row)">下载</el-button>
                  <el-button size="mini" type="danger" @click="deleteFile(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ThesisInfo',
  data() {
    return {
      activeTab: 'content',
      loading: false,
      canExport: true,
      scoreValue: 92,
      evaluationScore: 95,
      selectedStudent: {
        id: 1,
        name: '曾志龙'
      },
      students: [
        { id: 1, name: '曾志龙' },
        { id: 2, name: '洪炎生' },
        { id: 3, name: '高竟鸿' },
        { id: 4, name: '张奕韬' },
        { id: 5, name: '黄佳旭' }
      ],
      // 学生个人信息数据
      studentProfiles: {
        1: {
          name: '曾志龙',
          studentId: '202301001',
          className: '计算机科学与技术1班',
          major: '计算机科学与技术',
          contact: '13800138001',
          email: 'zengzhilong@example.com',
          advisor: '张教授',
          enrollmentYear: '2023'
        },
        2: {
          name: '洪炎生',
          studentId: '202301002',
          className: '软件工程1班',
          major: '软件工程',
          contact: '13800138002',
          email: 'hongyansheng@example.com',
          advisor: '李教授',
          enrollmentYear: '2023'
        },
        3: {
          name: '高竟鸿',
          studentId: '202301003',
          className: '数据科学1班',
          major: '数据科学与大数据技术',
          contact: '13800138003',
          email: 'gaojinghong@example.com',
          advisor: '王教授',
          enrollmentYear: '2023'
        },
        4: {
          name: '张奕韬',
          studentId: '202301004',
          className: '网络工程1班',
          major: '网络工程',
          contact: '13800138004',
          email: 'zhangyitao@example.com',
          advisor: '刘教授',
          enrollmentYear: '2023'
        },
        5: {
          name: '黄佳旭',
          studentId: '202301005',
          className: '信息安全1班',
          major: '信息安全',
          contact: '13800138005',
          email: 'huangjiaxu@example.com',
          advisor: '陈教授',
          enrollmentYear: '2023'
        }
      },
      fileList: [
        {
          name: '论文全文.pdf',
          url: '#',
          size: 2048000,
          type: 'pdf'
        },
        {
          name: '答辩PPT.pptx',
          url: '#',
          size: 5120000,
          type: 'pptx'
        }
      ],
      userInfo: {
        name: '张三',
        studentId: '20210001',
        className: '软件工程1班',
        major: '软件工程',
        contact: '13800138000',
        email: 'zhangsan@example.com',
        advisor: '李教授',
        enrollmentYear: '2021',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      },
      advisorInfo: {
        name: '李教授',
        title: '教授',
        department: '计算机科学与技术学院',
        avatar: 'https://cube.elemecdn.com/1/88/03b0d39583f48206768a7534e55bc1png.png'
      },
      thesisBasicInfo: {
        title: '基于深度学习的智能推荐系统研究与实现',
        type: '学术研究',
        submitDate: '2024-05-15',
        defenseDate: '2024-06-20',
        score: '优秀',
        pass: true,
        archived: true,
        keywords: ['深度学习', '推荐系统', '用户行为', '个性化推荐'],
        researchDirection: '人工智能与机器学习'
      },
      thesisStatus: {
        type: 'success',
        text: '已完成'
      },
      thesisDetailInfo: {
        background: '随着互联网和大数据技术的快速发展，推荐系统已经成为各大平台的核心功能之一。传统的推荐方法在处理大规模数据和捕捉用户复杂兴趣模式方面存在不足，深度学习技术的出现为解决这些问题提供了新的思路。',
        researchContent: '本研究提出了一种基于深度学习的智能推荐系统框架，结合用户行为数据和内容特征，实现个性化推荐。研究过程中，我们构建了完整的数据处理流程，设计了深度神经网络模型，并进行了大量的实验验证。系统在多个公开数据集上表现优异，推荐准确率比传统方法提高了23%。',
        methods: [
          {
            title: '数据收集与预处理',
            description: '收集用户历史行为数据，包括浏览、点击、购买等记录，并进行清洗、去重、标准化等预处理操作。'
          },
          {
            title: '特征工程',
            description: '提取用户特征、物品特征和上下文特征，构建高维特征向量，并使用特征选择和降维技术优化特征表示。'
          },
          {
            title: '模型设计',
            description: '设计基于CNN和RNN的混合深度学习模型，使用注意力机制捕捉用户兴趣的动态变化。'
          },
          {
            title: '实验验证',
            description: '在多个公开数据集上进行对比实验，使用多种评价指标全面评估模型性能。'
          }
        ],
        innovations: [
          '提出了一种结合用户历史行为和实时兴趣的动态推荐算法，能够更好地适应用户兴趣的变化。',
          '设计了多通道卷积神经网络，有效提取内容特征，提高了推荐的准确性和多样性。',
          '实现了模型的在线学习和实时更新机制，确保推荐结果的时效性。',
          '开发了自适应的推荐结果解释模块，提高用户信任度和系统透明度。'
        ],
        achievements: [
          {
            title: '完成了推荐系统原型设计和实现',
            description: '基于PyTorch框架开发了完整的推荐系统原型，包含数据处理、模型训练、在线服务等模块。',
            date: '2024-04-10'
          },
          {
            title: '在公开数据集上取得了优异的性能指标',
            description: '在MovieLens和Netflix数据集上进行测试，推荐准确率达到89.5%，比基线模型提高了23%。',
            date: '2024-04-25'
          },
          {
            title: '申请了一项发明专利',
            description: '《一种基于深度学习的动态推荐方法》，申请号：202410000001.X。',
            date: '2024-05-05'
          },
          {
            title: '发表了一篇学术论文',
            description: '《A Deep Learning Framework for Personalized Recommendation Systems》，发表于Journal of Computer Science and Technology。',
            date: '2024-05-20'
          }
        ],
        evaluation: {
          content: '该论文选题具有重要的理论意义和实际应用价值。作者系统地研究了基于深度学习的推荐系统，提出了创新的算法和方法，并通过实验验证了其有效性。论文结构清晰，论证充分，实验设计合理，数据分析深入。作者具有扎实的专业基础和较强的科研能力。论文达到了优秀论文水平。',
          date: '2024-06-25'
        }
      }
    }
  },
  // 生命周期 - 创建完成
  created() {
    this.setActiveMenu(this.$route);
    this.initUserInfo();
  },

  methods: {
    handleStudentChange(student) {
      console.log('选择的学生:', student);
      // 确保student对象有效
      if (student && student.id) {
        // 更新选中的学生
        this.selectedStudent = student;
        // 更新页面标题
        document.title = `论文首页 (${student.name}) - 毕业论文管理系统`;
        // 根据选中的学生ID更新用户信息
        if (this.studentProfiles[student.id]) {
          // 深拷贝学生信息到userInfo对象
          this.userInfo = JSON.parse(JSON.stringify(this.studentProfiles[student.id]));
          // 确保显示的姓名与选择的学生一致
          this.userInfo.name = student.name;
          console.log('更新后的用户信息:', this.userInfo);
        } else {
          // 如果找不到对应的学生信息，显示警告并使用基本信息
          this.$message.warning(`未找到学生ID ${student.id} 的详细信息`);
          this.userInfo = {
            name: student.name,
            studentId: '',
            className: '',
            major: '',
            contact: '',
            email: '',
            advisor: '',
            enrollmentYear: '',
            avatar: ''
          };
        }
      }
    },
    // 初始化用户信息
    initUserInfo() {
      if (this.selectedStudent && this.selectedStudent.id) {
        if (this.studentProfiles[this.selectedStudent.id]) {
          // 深拷贝学生信息到userInfo对象
          this.userInfo = JSON.parse(JSON.stringify(this.studentProfiles[this.selectedStudent.id]));
          // 确保显示的姓名与选择的学生一致
          this.userInfo.name = this.selectedStudent.name;
        } else {
          // 如果找不到对应的学生信息，使用基本信息
          this.userInfo = {
            name: this.selectedStudent.name,
            studentId: '',
            className: '',
            major: '',
            contact: '',
            email: '',
            advisor: '',
            enrollmentYear: '',
            avatar: ''
          };
        }
      }
    },
    // 刷新数据
    refreshData() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.$message.success('数据刷新成功');
      }, 1000);
    },

    // 导出报告
    exportReport() {
      this.$message.info('导出功能正在开发中...');
    },

    // 编辑用户信息
    editUserInfo() {
      this.$confirm('请选择编辑方式', '编辑用户信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '表单编辑',
        cancelButtonText: '批量编辑',
        showClose: false
      }).then(() => {
        // 表单编辑方式
        this.showFormEditDialog();
      }).catch((action) => {
        if (action === 'cancel') {
          // 批量编辑方式
          this.showBatchEditDialog();
        }
      });
    },

    // 显示表单编辑对话框
    showFormEditDialog() {
      this.$prompt('请选择要编辑的字段', '表单编辑', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'textarea',
        inputValue: `请选择要编辑的字段：\n1. 姓名\n2. 学号\n3. 班级\n4. 专业\n5. 联系方式\n6. 邮箱\n7. 指导老师\n8. 入学年份\n\n请输入对应的数字（如：1,3,5）`,
        inputValidator: (value) => {
          if (!value || value.trim() === '') {
            return '请选择要编辑的字段';
          }
          return true;
        }
      }).then(({ value }) => {
        const selectedFields = value.split(',').map(num => parseInt(num.trim())).filter(num => num >= 1 && num <= 8);

        if (selectedFields.length === 0) {
          this.$message.error('请选择有效的字段编号');
          return;
        }

        // 根据选择的字段逐个编辑
        this.editFieldsSequentially(selectedFields);
      }).catch(() => {
        this.$message.info('已取消编辑');
      });
    },

    // 显示批量编辑对话框
    showBatchEditDialog() {
      this.$prompt('请按格式编辑所有信息', '批量编辑', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'textarea',
        inputValue: `姓名: ${this.userInfo.name}\n学号: ${this.userInfo.studentId}\n班级: ${this.userInfo.className}\n专业: ${this.userInfo.major}\n联系方式: ${this.userInfo.contact}\n邮箱: ${this.userInfo.email}\n指导老师: ${this.userInfo.advisor}\n入学年份: ${this.userInfo.enrollmentYear}`,
        inputValidator: (value) => {
          if (!value || value.trim() === '') {
            return '信息不能为空';
          }
          return true;
        }
      }).then(({ value }) => {
        // 解析用户输入的信息
        const lines = value.split('\n');
        const updatedInfo = {};

        lines.forEach(line => {
          const [key, val] = line.split(':').map(item => item.trim());
          if (key && val) {
            switch(key) {
              case '姓名': updatedInfo.name = val; break;
              case '学号': updatedInfo.studentId = val; break;
              case '班级': updatedInfo.className = val; break;
              case '专业': updatedInfo.major = val; break;
              case '联系方式': updatedInfo.contact = val; break;
              case '邮箱': updatedInfo.email = val; break;
              case '指导老师': updatedInfo.advisor = val; break;
              case '入学年份': updatedInfo.enrollmentYear = val; break;
            }
          }
        });

        // 更新用户信息
        Object.assign(this.userInfo, updatedInfo);
        this.$message.success('用户信息修改成功');
      }).catch(() => {
        this.$message.info('已取消编辑');
      });
    },

    // 逐个编辑字段
    editFieldsSequentially(fields) {
      const fieldMap = {
        1: { name: '姓名', key: 'name', value: this.userInfo.name },
        2: { name: '学号', key: 'studentId', value: this.userInfo.studentId },
        3: { name: '班级', key: 'className', value: this.userInfo.className },
        4: { name: '专业', key: 'major', value: this.userInfo.major },
        5: { name: '联系方式', key: 'contact', value: this.userInfo.contact },
        6: { name: '邮箱', key: 'email', value: this.userInfo.email },
        7: { name: '指导老师', key: 'advisor', value: this.userInfo.advisor },
        8: { name: '入学年份', key: 'enrollmentYear', value: this.userInfo.enrollmentYear }
      };

      const editNextField = (index) => {
        if (index >= fields.length) {
          this.$message.success('所有字段编辑完成');
          return;
        }

        const fieldNum = fields[index];
        const fieldInfo = fieldMap[fieldNum];

        if (!fieldInfo) {
          editNextField(index + 1);
          return;
        }

        this.$prompt(`请输入新的${fieldInfo.name}`, `编辑${fieldInfo.name}`, {
          confirmButtonText: '确定',
          cancelButtonText: '跳过',
          inputValue: fieldInfo.value,
          inputValidator: (value) => {
            if (!value || value.trim() === '') {
              return `${fieldInfo.name}不能为空`;
            }
            return true;
          }
        }).then(({ value }) => {
          this.userInfo[fieldInfo.key] = value.trim();
          this.$message.success(`${fieldInfo.name}修改成功`);
          editNextField(index + 1);
        }).catch((action) => {
          if (action === 'cancel') {
            this.$message.info(`已跳过${fieldInfo.name}编辑`);
            editNextField(index + 1);
          }
        });
      };

      editNextField(0);
    },

    // 处理头像上传成功
    handleAvatarSuccess(res, file) {
      this.userInfo.avatar = URL.createObjectURL(file.raw);
    },

    // 头像上传前校验
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    // 处理文件变化
    handleFileChange(file, fileList) {
      this.fileList = fileList.slice(-3); // 只保留最近3个文件
    },

    // 格式化文件大小
    formatFileSize(bytes) {
      if (bytes === 0) return '0 B';
      const k = 1024;
      const sizes = ['B', 'KB', 'MB', 'GB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i];
    },

    // 下载文件
    downloadFile(file) {
      this.$message.success(`正在下载文件：${file.name}`);
    },

    // 删除文件
    deleteFile(file) {
      this.$confirm(`确定要删除文件 ${file.name} 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.fileList = this.fileList.filter(item => item.name !== file.name);
        this.$message.success('文件删除成功');
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },

    // 获取成果类型
    getAchievementType(index) {
      const types = ['success', 'primary', 'warning', 'info'];
      return types[index % types.length];
    },

    // 获取成果图标
    getAchievementIcon(index) {
      const icons = ['el-icon-check', 'el-icon-document', 'el-icon-trophy', 'el-icon-edit'];
      return icons[index % icons.length];
    }
  }
}
</script>

<style scoped>
.thesis-info-container {
  padding: 20px;
  background-color: #f8f9fa;
  min-height: calc(100vh - 120px);
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 30px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.page-header h1 {
  font-size: 32px;
  margin-bottom: 15px;
  font-weight: 600;
}

.page-header p {
  font-size: 18px;
  opacity: 0.9;
}

.module-card {
  margin-bottom: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: none;
}

.module-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.card-header {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  background-color: #f8f9fa;
  border-bottom: 2px solid #e9ecef;
  padding: 15px 20px;
  border-radius: 12px 12px 0 0;
}

.card-header i {
  margin-right: 8px;
  color: #667eea;
}

.user-info-content {
  display: flex;
  align-items: center;
  padding: 30px;
  background-color: white;
}

.avatar-section {
  margin-right: 40px;
}

.avatar-section .el-avatar {
  border: 4px solid #e9ecef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.avatar-section .el-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.info-section {
  flex: 1;
}

.info-section el-row {
  margin-bottom: 20px;
}

.info-section strong {
  color: #555;
  margin-right: 8px;
}

.thesis-basic-info {
  padding: 30px;
  background-color: white;
}

.thesis-basic-info el-row {
  margin-bottom: 20px;
}

.thesis-basic-info strong {
  color: #555;
  margin-right: 8px;
}

.thesis-basic-info el-col {
  padding: 5px 0;
}

.thesis-detail-info {
  padding: 20px;
  background-color: white;
}

.el-tabs {
  margin-bottom: 20px;
}

.el-tabs__header {
  margin-bottom: 20px;
}

.el-tabs__item {
  font-size: 16px;
  padding: 0 20px;
}

.el-tabs__item.is-active {
  color: #667eea;
  font-weight: 600;
}

.el-tabs__active-bar {
  background-color: #667eea;
  height: 3px;
}

.tab-content {
  padding: 25px;
  background-color: #f8f9fa;
  border-radius: 8px;
  line-height: 1.8;
  font-size: 15px;
  color: #444;
}

.tab-content ul {
  padding-left: 20px;
  margin-top: 15px;
}

.tab-content li {
  margin-bottom: 12px;
  position: relative;
  padding-left: 10px;
}

.tab-content li:before {
  content: '•';
  color: #667eea;
  font-weight: bold;
  position: absolute;
  left: -10px;
  font-size: 20px;
}

/* 额外的样式 */
.header-actions {
  margin-top: 20px;
}

.header-actions .el-button {
  margin: 0 10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-tag {
  font-size: 14px;
  height: 24px;
  line-height: 22px;
}

.title-row {
  margin-bottom: 20px;
}

.thesis-title {
  font-size: 18px;
  font-weight: 500;
  color: #667eea;
  line-height: 1.6;
}

/* 研究方法样式 */
.method-list {
  list-style: none;
  padding: 0;
}

.method-item {
  display: flex;
  margin-bottom: 20px;
  padding: 15px;
  background-color: white;
  border-radius: 8px;
  border-left: 4px solid #667eea;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.method-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: #667eea;
  color: white;
  border-radius: 50%;
  font-weight: bold;
  margin-right: 15px;
  flex-shrink: 0;
}

.method-content h5 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 16px;
}

.method-content p {
  margin: 0;
  color: #666;
  line-height: 1.6;
}

/* 创新点样式 */
.innovation-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.innovation-item {
  display: flex;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.innovation-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.innovation-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 50%;
  font-weight: bold;
  margin-right: 15px;
  flex-shrink: 0;
}

.innovation-content h5 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 16px;
}

.innovation-content p {
  margin: 0;
  color: #666;
  line-height: 1.6;
}

/* 导师评价样式 */
.evaluation-section {
  background-color: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.evaluator-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e9ecef;
}

.evaluator-details {
  margin-left: 15px;
}

.evaluator-details strong {
  font-size: 16px;
  color: #333;
  display: block;
}

.evaluator-details p {
  margin: 5px 0 0 0;
  color: #666;
  font-size: 14px;
}

.evaluation-content p {
  line-height: 1.8;
  margin-bottom: 15px;
  color: #444;
}

.evaluation-score {
  margin-bottom: 15px;
}

.evaluation-date {
  color: #999;
  font-size: 14px;
  text-align: right;
}

/* 时间线样式 */
.el-timeline {
  padding-left: 20px;
}

.el-timeline-item__timestamp {
  font-size: 14px;
  color: #667eea;
  font-weight: 500;
}

.el-timeline-item__content {
  padding: 15px;
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.el-timeline-item__content h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 16px;
}

.el-timeline-item__content p {
  margin: 0;
  color: #666;
  line-height: 1.6;
}

/* 文件列表样式 */
.file-list-section {
  margin-top: 20px;
}

.file-list-section h4 {
  margin-bottom: 15px;
  color: #333;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .innovation-list {
    grid-template-columns: 1fr;
  }

  .method-item,
  .innovation-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .method-number,
  .innovation-icon {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .evaluator-info {
    flex-direction: column;
    text-align: center;
  }

  .evaluator-details {
    margin-left: 0;
    margin-top: 15px;
  }
}

.file-section {
  margin-top: 30px;
}

.file-section h3 {
  margin-bottom: 20px;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.upload-demo {
  border: 2px dashed #dcdfe6;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.upload-demo:hover {
  border-color: #667eea;
  background-color: #f0f4ff;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.module-card {
  animation: fadeIn 0.6s ease-out;
}

.module-card:nth-child(2) {
  animation-delay: 0.2s;
}

.module-card:nth-child(3) {
  animation-delay: 0.4s;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .page-header h1 {
    font-size: 28px;
  }

  .user-info-content {
    flex-direction: column;
    text-align: center;
  }

  .avatar-section {
    margin-right: 0;
    margin-bottom: 30px;
  }
}

@media (max-width: 768px) {
  .thesis-info-container {
    padding: 10px;
  }

  .page-header {
    padding: 20px 0;
  }

  .page-header h1 {
    font-size: 24px;
  }

  .page-header p {
    font-size: 16px;
  }

  .user-info-content,
  .thesis-basic-info {
    padding: 20px;
  }

  .tab-content {
    padding: 15px;
    font-size: 14px;
  }

  .el-col {
    margin-bottom: 10px;
  }
}
</style>
